<template>
  <div class="header">
    <el-icon>
      <Back @click="back" />
    </el-icon>
  </div>
  <el-table :data="applicationDetails" style="width: 100%">
    <el-table-column prop="content" label="内容" width=""></el-table-column>
    <el-table-column prop="score" label="分值" width="210"></el-table-column>
    <el-table-column prop="code" label="编码" width="210"></el-table-column>
    <el-table-column label="操作" width="220" #default="scope">
      <el-button type="primary" @click="showDialog(scope.row)">删除</el-button>
      <el-button type="primary" @click="showDialog(scope.row)">修改</el-button>
    </el-table-column>
  </el-table>
  <el-dialog title="警告" v-model="dialogVisible" width="35%" :before-close="handleClose">
        <span>确定要删除{{currentcode}}这条申报难度吗？</span>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleDelete">确 定</el-button>
        </span>
      </el-dialog>

</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();

const route = useRoute();
const applicationDetails = ref([]);
const dialogVisible = ref(false);
const currentcode =ref('');
const currentRow = ref(null);
const filterLevel = ref(''); // 筛选等级的响应式变量
const levels = ref([]); // 存储等级列表的响应式变量
const uniqueLevels = ref([]); // 存储去重后的等级列表的响应式变量

const id = route.query.id;
// 获取等级列表
async function fetchLevels() {
  try {
    const response = await axios.get(`http://192.168.1.108:3002/teamgroup/applicationlevel/encode/${id}`, {
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('adminToken')
      }
    });
    levels.value = response.data.data;
    uniqueLevels.value = Array.from(new Set(levels.value.map(item => item.level))).map(level => ({ label: level, value: level }));
  } catch (error) {
    console.error('Error fetching levels:', error);
  }
}

// 在组件加载时调用 fetchLevels 函数
fetchLevels();

// 获取申报难度列表
async function fetchApplicationDetails() {
  try {
    let url = `http://back1.idcfengye.com:15173/teamgroup/applicationlevel/encode/${id}`;
    if (filterLevel.value) {
      url += '?level=' + filterLevel.value;
    }
    const response = await axios.get(url, {
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('adminToken')
      }
    });
    const data = response.data.data;
    if (filterLevel.value) {
      applicationDetails.value = data.filter(item => item.level === filterLevel.value);
    } else {
      applicationDetails.value = data;
    }
  } catch (error) {
    console.error('Error fetching application details:', error);
  }
}

// 在组件加载时调用 fetchApplicationDetails 函数
fetchApplicationDetails();

// 显示对话框
function showDialog(row) {
  currentcode.value = row.code;
  currentRow.value = row.id;
  dialogVisible.value = true;
}

// 处理关闭
function handleClose(done) {
  done();
}

function back() {
  router.back();
}

// 处理删除操作
async function handleDelete() {
  if (currentRow.value) {
    try {
      await axios.delete(`http://back1.idcfengye.com:15173/teamgroup/application/${currentRow.value}`, {
        headers: {
          'Authorization': 'Bearer ' + localStorage.getItem('adminToken')
        }
      });
      fetchApplicationDetails(); // 重新加载数据
      ElMessage.success('删除成功');
      dialogVisible.value = false; // 关闭对话框
    } catch (error) {
      ElMessage.error('删除失败', '错误');
    }
  }
}
</script>

<style scoped>
.el-table {
  display: flex;
  justify-content: center;
  /* 使表格居中 */
  align-items: center;
}

.header {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* 其他样式 */
}

.header .el-icon {
  margin: 0 10px 18px 0;
  /* 添加间距 */
}
</style>